<template>
  <div class="modifyHeadImg">
      <div class="deposit-content">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                    <div class="left"
                        slot="left">
                        <van-icon name="arrow-left"
                                size="24px"
                                color="#fff" />
                    </div>
                    <div class="title"
                        slot="title">{{title}}</div>
                </van-nav-bar>
            </div>
            <div class="reset-wrapper" @click="uploadImgURL">
                <img src="@/assets/img/designer/personalCenter/defaultHeadPortrait.png" v-if="userIconUrl == null"  lazy-load />
                <img :src="userIconUrl" class="userIconUrl" lazy-load v-else />
            </div>
       </div>
  </div>
</template>
<script>
import apiConfig from "@/api/index";
import { mapMutations } from "vuex"
import { getToken, getuserUid, getRole, getUserInfo, setUserInfo } from "@/utils/auth"
export default {
  name: "modifyHeadImg",
  components: {
  },
  data() {
    return {
      title: "头像编辑",
      imgURL: "",
      userIconUrlO: "",
      userIconUrl: "",
      inputValue: "",
      modifymsg: "",
      fromW: "",
      hideLoading: true,
    };
  },
  created() {
    this.fromW = this.$route.params.fromW
    let imgURL = getUserInfo().pictureUrl
    if (!getUserInfo().userName) {
      this.$toast('参数异常')
      window.setTimeout(() => {
        this.$router.push('/designer/personalCenter')
      }, 500)
      return
    }
    this.userIconUrl = imgURL;
  },
  mounted() {
    // this.uploadImgURL();
  },
  watch:{
    userIconUrlO:function(newVal, oldVal){
      this.userIconUrl = newVal
    }
  },
  methods: {
    diffBack() {
        // 之后需要删除 处理 看是修改之后直接跳转 还是直接刷新页面
        if (this.fromW == "personalCenterD"){
            this.$router.push('/designer/personalCenter')
        } else {
            this.$router.push('/designer/myPersonality')
        }
    },
    //上传
    uploadImgURL() {
      this.$nextTick(() => {
        window.plus.gallery.pick(
          p => {
            window.plus.io.resolveLocalFileSystemURL(
              p,
              entry => {
                entry.file(file => {
                 var fileSize = file.size / 1024 / 1024;
                  if (fileSize > 5) {
                      window.plus.nativeUI.toast(
                      "请保证图片需低于5M"
                      );
                  } else {
                    this.upload(p);
                  }
                });
              },
              e => {
                // this.warmTips = true
                // this.warmMsg = "无法指向文件路径" + e.message
                window.plus.nativeUI.toast(
                  "Resolve file URL failed: " + e.message
                );
              }
            );
          },
          e => {
                // this.warmTips = true
                // this.warmMsg = "已取消选择文件"
                window.plus.nativeUI.toast("已取消选择文件");
                if (this.fromW == "personalCenterD"){
                    this.$router.push('/designer/personalCenter')
                } else {
                    this.$router.push('/designer/myPersonality')
                }
          },
          this.galleryOP()
        );
      });
    },

    upload(path) {
      console.log('进入upload')
			this.$store.commit("setProfile", true);
      this.hideLoading = false
      var wt = window.plus.nativeUI.showWaiting("上传中");
      var task = window.plus.uploader.createUpload(
        `${apiConfig.config.baseURL}app/user/editUserInfo`,
        { method: "POST" },
        (t, status) => {
          // 上传完成
          console.log('进入status 200前')
          if (status == 200) {
            const e = JSON.parse(t.responseText);
            console.log('进入status 200中')
            console.log(e.code)
            console.log(e)
            if (e.code === 200) {
              console.log('e.code === 200')
              console.log(e.data + "e.data")
              this.userIconUrlO = e.data;
              // this.modifyPersonImg();
              if (e.data) {
                this.$toast('修改成功')
                this.getUserMsgCenter()
                window.setTimeout(() => {
                  if (this.fromW == "personalCenterD"){
                      this.$router.push('/designer/personalCenter')
                  } else {
                      this.$router.push('/designer/myPersonality')
                  }
                }, 800)
              }
            } else {
              console.log('e.code不是 200')
                wt.close();
                window.plus.nativeUI.toast(e.msg || '数据开小差了');
            }
            wt.close();
          } else if (status == 413) {
            wt.close();
            window.plus.nativeUI.toast('图片好像有点大哦');
            if (this.fromW == "personalCenterD"){
                this.$router.push('/designer/personalCenter')
            } else {
                this.$router.push('/designer/myPersonality')
            }
          }else {
            consoole.log('status不是200 413')
            wt.close();
            window.plus.nativeUI.toast("Upload failed: " + e? e.msg:'数据开小差了');
          }
        }
      );
      task.setRequestHeader("token", getToken());
      task.addData( "uid", getuserUid());
      task.addData( "userName", getUserInfo().userName);
      task.addData( "sex", getUserInfo().sex);
      task.addData( "updateBy", getuserUid());
      task.addFile(path, { key: "picture" });
      task.start();
    },
    galleryOP() {
      var data = {
        multiple: false
      };
      data.filter = "image";
      return data;
    },
    // 获取个人中心首页数据
    async getUserMsgCenter() {
      const res = await HTTP("userCenter", {
        userUid: getuserUid()
      });
      if (res.code == 200) {
          setUserInfo(res.data)
      } else {
        this.$toast(res.msg|| '服务器异常')
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.modifyHeadImg {
  width: 100%;
  height: 100%;
  text-align: center;
  .top-bg{
        width: 100%;
        background: #fff;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        .header {
            background: #5E8EFE;
            color: #ffffff;
            height: 0.92rem;
            .title {
                color: #ffffff;
                font-size: 0.35rem;
                }
        }
    }
  .reset-wrapper{
      position: fixed;
      width: 100%;
      padding: 0.24rem;
      box-sizing: border-box;
      top: 0.92rem;
      left: 0;
      right: 0;
      overflow-y: scroll;
      bottom: 1.6rem;
  }
  img{
    width: 2rem;
    height: auto;
    margin: 0.1rem auto;
  }
  .userIconUrl {
    width: 2rem;
    height: auto;
    margin: 0.1rem auto;
  }
  .saveDiv {
    width: 100%;
    height: 2.5rem;
    text-align: center;
    margin-top: 2rem;
    .saveBtn {
      width: 80%;
      height: 2.5rem;
      border: 0;
      border-radius: 0.2rem;
    }
  }
}
</style>
